@require '~styles/variables'
@require '~styles-lib/mixins'

$-scroll-affixed-spacing = ($grid-gutter-width / 2)

html
	// Firefox uses this color to blank the screen before it renders. It's
	// better to use this than constantly flicker black while rendering.
	change-bg('bg')

body
	change-bg('darkest', true)

#shell-top-nav
	top: 0
	// If we used `right: 0` instead, the top nav would flex off the screen if
	// a horizontal scrollbar became visible. Doing it this way ensures it's
	// always the correct width.
	width: 100vw
	max-width: 100%

#shell-cbar
	top: $shell-top-nav-height
	left: 0
	bottom: 0

#shell-body
	margin-top: $shell-top-nav-height

#shell-banner
	top: 0
	left: 0
	right: 0

#shell-hot-bottom
	bottom: 0
	left: 0
	right: 0

.growl-container
	bottom: 10px

.chat-window-wrap
	top: 0
	left: 0
	right: 0
	bottom: 0

	@media $media-sm-up
		top: $shell-top-nav-height + 10px
		right: $shell-pane-width + 10px

// Affixed components should be shifted down from the top of the shell to make room
// for the top nav.
.gj-scroll-affixed.-anchor-top
	margin-top: $shell-top-nav-height + $-scroll-affixed-spacing

#shell
	&.has-banner
		#shell-top-nav
			top: $shell-top-nav-height

		.shell-pane, #shell-cbar
			top: $shell-top-nav-height * 2

		#shell-body
			margin-top: $shell-top-nav-height * 2

		@media $media-sm-up
			.chat-window-wrap
				top: $shell-top-nav-height * 2 + 10px

		.gj-scroll-affixed.-anchor-top
			margin-top: $shell-top-nav-height * 2 + $-scroll-affixed-spacing

	&.has-cbar
		#shell-body
			margin-left: $shell-cbar-width

body.has-hot-bottom
	#shell-body
		margin-bottom: $status-bar-height

	.shell-pane, #shell-cbar
		bottom: $status-bar-height

	.growl-container
		bottom: $status-bar-height + 10px
